import Layout from "../../../components/layout"; // import { data } from "../../../lib/testData"; // import { aniData } from "../../../lib/infoData"; import Image from "next/image"; import VideoPlayer from "../../../components/videoPlayer"; import Link from "next/link"; import { closestMatch } from "closest-match"; import Head from "next/head"; import { useEffect, useState } from "react"; import Modal from "../../../components/modal"; import { useNotification } from "../../../lib/useNotify"; import { signIn, signOut } from "next-auth/react"; import { getServerSession } from "next-auth/next"; import { authOptions } from "../../api/auth/[...nextauth]"; import AniList from "../../../components/media/aniList"; import { Navigasi } from "../.."; export default function Info({ info, sessions, statusWatch }) { const title = info.aniData.title.romaji || info.aniData.title.english; const data = info.aniData; const fallback = info.epiFallback; const { Notification: NotificationComponent, show } = useNotification(); let playingEpisode = data.episodes .filter((item) => item.id == info.id) .map((item) => item.number); if (playingEpisode == 0) { playingEpisode = fallback .filter((item) => item.id == info.id) .map((item) => item.number); } const [open, setOpen] = useState(false); const [aniStatus, setAniStatus] = useState(""); const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode)); const handleStatus = (e) => { setAniStatus(e.target.value); }; const handleProgress = (e) => { const value = parseFloat(e.target.value); if (!isNaN(value) && value >= 0 && value <= data.totalEpisodes) { setAniProgress(value); } }; const handleSubmit = (e) => { e.preventDefault(); const formData = { status: aniStatus, progress: aniProgress }; console.log(formData); }; const playingTitle = data.episodes .filter((item) => item.id == info.id) .map((item) => item.title); return ( <> {fallback ? data.title.romaji || data.title.english : playingTitle} setOpen(false)}>

Save this Anime to Your List

{!sessions && ( )} {sessions && ( <>
)}
{data.episodes.length > 0 ? ( data.episodes .filter((items) => items.id == info.id) .map((item) => (
{item.title}

Episode {item.number}

)) ) : ( <> {fallback .filter((item) => item.id == info.id) .map((item) => (
{title}

Episode {item.number}

))} )}
Anime Cover

Studios

{data.studios}
setOpen(true)}> {/* Save to My List */}

Status

{data.status}

Titles

{data.title.romaji || ""}
{data.title.english || ""}
{data.title.native || ""}
{data.genres.map((item, index) => (
{item}
))}

Up Next

{data.episodes.length > 0 ? data.episodes.map((item) => { return (
image Episode {item.number} {item.id == info.id && (
)}

{item.title}

{item.description}

); }) : fallback.map((item) => { return ( Episode {item.number} ); })}
); } export async function getServerSideProps(context) { const session = await getServerSession(context.req, context.res, authOptions); const { info } = context.query; if (!info) { return { notFound: true, }; } const id = info[0]; const aniId = info[1]; const seek = info[2] || 0; let epiFallback = null; const res = await fetch(`https://api.moopa.my.id/meta/anilist/watch/${id}`); const epiData = await res.json(); const res2 = await fetch( `https://api.moopa.my.id/meta/anilist/info/${aniId}` ); const aniData = await res2.json(); if (aniData.episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ aniData.title.romaji || aniData.title.english }` ); const data = await res.json(); const match = closestMatch( aniData.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); epiFallback = infos.episodes; } } const playingEpisode = aniData.episodes .filter((item) => item.id == id) .map((item) => item.number); const resp = await fetch( `https://moopa-anilist.vercel.app/api/get-media?username=${query.user}` ); const prog = await resp.json(); const gat = prog?.lists.map((item) => item.entries); const git = gat?.map((item) => item.find((item) => item.media.id === parseInt(aniId)) ); const gut = git?.find((item) => item?.media.id === parseInt(aniId)); let statusWatch = "CURRENT"; if (gut?.status === "COMPLETED") { statusWatch = "REPEATING"; } else if ( gut?.status === "REPEATING" && gut?.media?.episodes === parseInt(playingEpisode) ) { statusWatch = "COMPLETED"; } else if (gut?.status === "REPEATING") { statusWatch = "REPEATING"; } else if (aniData.totalEpisodes === parseInt(playingEpisode)) { statusWatch = "COMPLETED"; } return { props: { info: { id, seek, epiData, aniData, epiFallback, }, sessions: session, statusWatch: statusWatch, }, }; }